<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .menu{
            position: absolute;
            
        }
    </style>
</head>
<body>
    <script>
        var ul = document.createElement('ul')
        document.oncontextmenu = function (e) {
            //创建一个ul
            ul.className = 'menu'
            //给ul 里面的里加东西
            ul.innerHTML = '<li>赋值</li><li>赋值</li><li>赋值</li>'
            //设置鼠标的坐标位置
            ul.style.top = e.clientY + 'px'
            ul.style.left = e.clientX + 'px'
            document.body.appendChild(ul)
            //阻止默认事件
            return false
            //虽然每次ul 的 innerHTML是一样的 但是生成的元素不一样，所以每次都要早已便

            var list = ul.querySelectorAll('li')
            list.forEach(function(li){
                li.onclick = function (e) {
                    e.stopPropagation()
                }
            })
        }
        document.onclick = function () {
            // document.body.removeChild(ul)
            
            ul.remove()
        }
    </script>
</body>
</html>